<template>
  <div class="home">
    <div class="content">
      <div style="margin-top: 10px; display: flex">
        <div>
          指定专业及部门:
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px">
        选择归档类型
        <el-radio-group v-model="radio" style="margin-left: 10px">
          <el-radio :label="1">文书</el-radio>
          <el-radio :label="2">工程项目</el-radio>
          <el-radio :label="3">图文</el-radio>
        </el-radio-group>
        <div style="margin-top: 20px; padding-left: 116px">
          编号: 2023-01-02-001-01
        </div>
        <div style="margin-top: 10px; padding-left: 116px">
          <div style="margin-bottom: 10px">归档参数:</div>
          <div
            v-for="item in params"
            :key="item.id"
            :style="{
              display: 'flex',
              height: item.value == '标题' ? '80px' : '50px',
              'align-content': 'center',
            }"
          >
            <div
              class="flex-item"
              :style="{ 'line-height': item.value == '标题' ? '80px' : '50px' }"
            >
              {{ item.value }}
            </div>
            <div
              class="flex-item"
              :style="{ 'line-height': item.value == '标题' ? '80px' : '50px' }"
            >
              {{ item.type }}
            </div>
            <div
              style="
                display: flex;
                align-content: center;
                height: 40px;
                line-height: 40px;
                width: 600px;
              "
            >
              <div
                style="color: red"
                :style="{
                  'line-height': item.value == '标题' ? '80px' : '50px',
                }"
              >
                *
              </div>
              <el-input
                v-if="item.value == '标题'"
                v-model="item.content"
                type="textarea"
                maxlength="200"
                resize="none"
                style="margin-left: 10px"
                show-word-limit
                :rows="2"
                placeholder="请输入标题"
                @input="timeEffectInput"
              />
              <el-input
                v-else
                v-model="item.content"
                placeholder=""
                style="margin-left: 10px"
              />
            </div>
          </div>
        </div>
      </div>

      选择附件列表:
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
        :file-list="fileList"
        style="margin-top: 10px；width:200px"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或<em style="font-size: 14px">点击上传</em>
        </div>
      </el-upload>
    </div>
    <div style="text-align: center">
      <el-button type="primary" style="width: 200px">提 交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 1,
      title: '',
      inputDialog: false,
      params: [
        {
          id: 1,
          value: '标题',
          type: '文本',
          checked: true,
          content: '水库预算',
          default: ''
        },
        {
          id: 2,
          value: '交付部门',
          type: '文本',
          checked: true,
          content: '水库',
          default: ''
        },
        {
          id: 3,
          value: '保存期',
          type: '数字',
          checked: true,
          content: '永久',
          default: '6'
        }
      ],
      model: '',
      options: [],
      fileList: [
        {
          name: '文件1',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: '文件2',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ]
    }
  },
  methods: {
    timeEffectInput() {
      const length = this.dialogForm.remark.length // 先拿到当前输入时文本域文字长度
      if (length >= 200) {
        // 当长度超过200
        // 获取文本域计数统计设置字体为红色
        this.$el.querySelector('.el-input__count').style =
          'color:red !important'
        // 防止后续输入溢出截取0-200的字符
        this.dialogForm.remark = this.dialogForm.remark.substr(0, 200)
      } else {
        // 不超过则设置为原字体颜色
        this.$el.querySelector('.el-input__count').style =
          'color:#909399 !important'
      }
    }
  }
}
</script>

<style scoped>
.content {
  margin: 15px;
}
div {
  font-size: 15px;
}
.top-title {
  font-size: 18px;
  text-align: left;
  margin-left: 15px;
  margin-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.size {
  justify-content: space-evenly;
}
.flex-item {
  width: 120px;
}
div /deep/ .el-upload-list {
  width: 360px;
}
</style>
